<template>
    <a-menu theme="dark" mode="vertical" :inlineCollapsed="true" :defaultSelectedKeys="[routerId]">
        <a-menu-item :key="item.id" v-for="(item,index) in menuList" v-if="!isChildren(item)" @click="setRouter(item)">
            <a-icon :type="item.systemMenuIcon || 'form'" />
            <span>{{item.systemMenuName}}</span>
        </a-menu-item>
        <subMenu @setRouter="setRouter" :menu-info="item" :key="item.id" v-else></subMenu>
    </a-menu>
</template>

<script>
    import {menuList} from "../../assets/api";
    import subMenu from './subMenu'
    import {getLocal, setLocal} from "../../assets/service/auth";
    export default {
        name: "index",
        data(){
            return{
                routerId:Number(getLocal('routerId')) || 0
            }
        },
        props:{
            menuList:{
                type:Array,
                default:[]
            }
        },
        created(){
            console.log(this.menuList,521)
        },
        components:{
            subMenu
        },
        methods:{
            setRouter(item){
                this.$router.push(item.routeUrl)
                setLocal('routerId',item.id)
            },
            isChildren(item){
                if(item.childrenSystemMenuList){
                    if(item.childrenSystemMenuList.length){
                        return true
                    }else{
                        return false
                    }
                }else{
                    return false
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .xl-menu{
        .xl-menu-content{
            width: 50px;
            height: 100%;
            position: relative;
            transition: .5s;
            .xl-menu-item{
                width: calc(100% - 2px);
                height: 45px;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                overflow: hidden;
                cursor: pointer;
                color: #fff;
                position: relative;
                transition: .5s;
                .anticon{
                    font-size: 20px;
                }
                .xl-menu-icon{
                    width: 46px;
                    height: 45px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .xl-menu-text{
                    width: calc(100% - 50px);
                }
            }
            .xl-menu-item:hover{
                background-color: #2b3747;
                box-shadow: 0 0  3px rgba(0,0,0,.2);
            }
            .xl-menu-item-active{
                background-color: #2b3747;
                box-shadow: 0 0  3px rgba(0,0,0,.2);
            }
            .xl-menu-item-active:before{
                content: '';
                position: absolute;
                display: block;
                width: 2px;
                height: 30px;
                background-color: #479ef1;
                left: 5px;
            }
            .xl-menu-item-hover{
                background-color: #2b3747;
                box-shadow: 0 0  3px rgba(0,0,0,.2);
            }
            .xl-menu-item-hover:before{
                content: '';
                position: absolute;
                display: block;
                width: 2px;
                height: 30px;
                background-color: #2b3747;
                left: 5px;
            }
            .xl-menu-view{
                z-index: 100;
                width: 100%;
                height: 100%;
                border-right: 1px solid #f8f8f8;
                background-color: #334051;
            }
            .xl-menu-tag{
                position: absolute;
                height: 100%;
                left: -200px;
                top: 0;
                width: 200px;
                background-color: #334051;
                transition: .5s;
                z-index: -1;
                box-shadow: 6px 0  6px rgba(0,0,0,.2);
            }
        }
    }
</style>
